<template>
  <div class="dealer-contact">
    <h1 class="section-title">联系经销商</h1>

    <div class="dealer-container">
      <!-- 经销商列表 -->
      <div class="dealer-list">
        <div class="dealer-card" v-for="dealer in dealers" :key="dealer.id" @click="selectDealer(dealer)"
          :class="{ active: selectedDealer?.id === dealer.id }">
          <h3>{{ dealer.name }}</h3>
          <div class="dealer-info">
            <p><span>电话：</span>{{ dealer.phone }}</p>
            <p><span>地址：</span>{{ dealer.address }}</p>
            <p><span>营业时间：</span>{{ dealer.businessHours }}</p>
          </div>
        </div>
      </div>

      <!-- 地图和表单区域 -->
      <div class="map-form-container">
        <!-- 地图组件 -->
        <!-- <div class="map-container">
          <el-amap :zoom="13" :center="selectedDealer?.location || [116.397428, 39.90923]" :view-mode="'2D'"
            class="amap-container">
            <el-amap-marker v-for="dealer in dealers" :key="dealer.id"
              :position="[dealer.location.lng, dealer.location.lat]" :title="dealer.name" :offset="[0, -30]"
              @click="selectDealer(dealer)" />
          </el-amap>
        </div> -->

         <div ref="mapContainer" class="map-container"></div>

        <!-- 联系表单 -->
        <div class="contact-form" v-if="selectedDealer">
          <h3>咨询{{ selectedCar || '所选车型' }}底价</h3>
          <form @submit.prevent="submitForm">
            <div class="form-group">
              <label for="phone">联系电话</label>
              <input type="tel" id="phone" v-model="form.phone" placeholder="请输入您的电话号码" required>
            </div>

            <div class="form-group">
              <label for="email">电子邮箱</label>
              <input type="email" id="email" v-model="form.email" placeholder="请输入您的电子邮箱">
            </div>

            <div class="form-group">
              <label for="carModel">咨询车型</label>
              <input type="text" id="carModel" v-model="form.carModel" placeholder="请输入您想咨询的车型" required>
            </div>

            <button type="submit" class="submit-btn">提交咨询</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import '@vuemap/vue-amap/dist/style.css';

const route = useRoute();

// 从路由参数获取车型信息
const selectedCar = ref(route.query.carModel || '');

// 经销商数据
const dealers = ref([
  {
    id: 1,
    name: '北京奔驰4S店',
    phone: '010-88889999',
    address: '北京市朝阳区建国路88号',
    businessHours: '09:00-18:00',
    location: { lat: 39.9042, lng: 116.4074 }
  },
  {
    id: 2,
    name: '上海奔驰4S店',
    phone: '021-66667777',
    address: '上海市浦东新区张江高科技园区',
    businessHours: '08:30-17:30',
    location: { lat: 31.2304, lng: 121.4737 }
  },
  {
    id: 3,
    name: '广州奔驰4S店',
    phone: '020-55556666',
    address: '广州市天河区天河路385号',
    businessHours: '09:00-19:00',
    location: { lat: 23.1291, lng: 113.2644 }
  }
]);

const selectedDealer = ref(null);
const form = ref({
  phone: '',
  email: '',
  carModel: selectedCar.value
});

const selectDealer = (dealer) => {
  selectedDealer.value = dealer;
  if (map.value && marker.value) {
    map.value.setCenter([dealer.location.lng, dealer.location.lat]);
    map.value.setZoom(15);
    marker.value.setPosition([dealer.location.lng, dealer.location.lat]);
  }
};

const submitForm = () => {
  // 这里可以添加表单提交逻辑
  alert(`已向${selectedDealer.value.name}提交咨询请求，我们将尽快与您联系！`);
};

// 地图实例引用
const map = ref(null)
const mapContainer = ref(null)

// 加载高德地图脚本
const loadAMapScript = () => {
  return new Promise((resolve) => {
    if (window.AMap) return resolve()
    
    const script = document.createElement('script')
    script.src = `https://webapi.amap.com/maps?v=2.0&key=YOUR_API_KEY`
    script.onload = resolve
    document.head.appendChild(script)
  })
}

// 初始化地图
const marker = ref(null);

const initMap = async () => {
  await loadAMapScript()
  
  map.value = new AMap.Map(mapContainer.value, {
    viewMode: '2D',
    zoom: 11,
    center: [116.397428, 39.90923],
    // 可添加更多自定义配置
  })
  
  // 初始化标记点
  marker.value = new AMap.Marker({
    position: [116.397428, 39.90923],
    map: map.value
  })
}

// 销毁地图
const destroyMap = () => {
  if (map.value) {
    map.value.destroy()
    map.value = null
  }
}

onMounted(() => {
  initMap().catch(error => {
    console.error('地图初始化失败:', error)
  })
})

onUnmounted(() => {
  destroyMap()
})



</script>

<style scoped>
.dealer-contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #c0c0c0;
  font-weight: 250;
  letter-spacing: 0.05em;
}

.dealer-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}

.dealer-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dealer-card {
  background: rgba(30, 30, 30, 0.7);
  border-radius: 4px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
} 

.dealer-card:hover {
  background: rgba(40, 40, 40, 0.7);
}

.dealer-card.active {
  border-color: #0066cc;
  background: rgba(0, 102, 204, 0.1);
}

.dealer-card h3 {
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 300;
  font-size: 1.2rem;
}

.dealer-info p {
  color: #aaa;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.dealer-info span {
  color: #ddd;
  font-weight: 300;
}

.map-container {
  width: 100%;
  height: 500px;
  /* 必须设置固定高度 */
}

.map-form-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.amap-container {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.map-container {
  height: 500px;
  width: 100%;
  background: rgba(30, 30, 30, 0.7);
  border-radius: 4px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-form h3 {
  color: #fff;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ddd;
  font-size: 0.9rem;
}

.form-group input {
  width: 100%;
  padding: 0.8rem;
  background: rgba(20, 20, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
}

.submit-btn {
  width: 100%;
  padding: 0.8rem;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-btn:hover {
  background: #0052a3;
}

@media (max-width: 768px) {
  .dealer-container {
    grid-template-columns: 1fr;
  }
}
</style>